<template>
<div class="col-md-12">
  <my-navbar>
    <template slot="right">  
      <div class="form-group">
        <label class="control-label">{{$t('form.category')}}</label>
        <select class="form-control" v-model="category">
          <option v-for="option in categorys" :value="option.field">{{option.name}}</option>
        </select>
      </div>              
      <div class="form-group" v-if="false">
        <label class="control-label">{{$t('form.tag')}}</label>
        <input type="text" class="form-control" v-model="tag" debounce="500">
      </div>
    </template>   
    <template slot="left">
      <div class="checkbox">
        <label>
          <input type="checkbox" v-model="inEdit"> {{$t('common.edit')}}
        </label>
      </div>          
      <button class="btn btn-default" @click.prevent="onSaveChanges" v-show="isSavable">
        <span class="glyphicon glyphicon-save"></span> {{$t('common.save')}}
      </button>           
    </template>     
  </my-navbar>
  <div class="col-md-4" v-for="webapp in webapps">
    <div class="box box-widget widget-user">
      <div class="widget-user-header" 
        :class="{'bg-primary': webapp.state !== 'deleted', 
          'bg-deleted': webapp.state === 'deleted'}">
        <h3 class="widget-user-username">{{webapp.name}}</h3>
        <h5 class="widget-user-desc">{{webapp.pluginId}}</h5>
      </div>
      <div class="widget-user-image">
        <img class="img-circle" :src="webapp.iconlink" alt="{{webapp.name}}" @error="onIconError">
      </div>
      <div class="box-footer">
        <div class="row">
          <div class="col-sm-4 border-right">
            <div class="description-block">
              <h5 class="description-header">{{webapp.provider}}</h5>
              <span class="description-text">{{$t('webapp.provider')}}</span>
            </div>
          </div>
          <div class="col-sm-4 border-right">
            <div class="description-block">
              <button type="button" 
                class="btn btn-block btn-lg" 
                :class="{'btn-default': webapp.state === 'link',
                  'btn-danger': webapp.state === 'delete', 
                  'btn-success': webapp.state === 'deleted'}" 
                @click="onClick(webapp)">{{getWebAppOpText(webapp.state)}}</button>
            </div>
          </div>
          <div class="col-sm-4 border-right">
            <div class="description-block">
              <h5 class="description-header">{{webapp.version}}</h5>
              <span class="description-text">{{$t('webapp.version')}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>  
  </div>
</div>
</template>

<script>
import _ from 'lodash'
import settings from 'share/server/settings.js'
import toast from 'libs/toast.js'
import msgbox from 'libs/msgbox.js'
import {printObj} from 'libs/utils.js'
import {getUrlPrefix, commonApi, webAppApi} from 'share/server/api.js'
import locales from '../locales/webAppList.js'
import {List} from '../configs/webAppList.js'
import * as actions from 'share/server/vuex/actions/webapp.js'

export default {
  locales,
  vuex: {
    getters: {
      webapp: (state) => state.webapp
    },
    actions
  },
  data () {
    return {
      inEdit: false, 
      categorys: new List(this),
      category: 'all',
      tag: ''
    }
  },
  computed: {
    webapps () {
      var webapps = this.webapp.list

      if (this.category !== 'all') {
        webapps = _.filter(webapps, function(item) {
          return this.category === item.category
        }.bind(this))
      }

      if (this.tag !== '') {
        webapps = _.filter(webapps, function(item) {
          return item.tag.includes(this.tag)
        }.bind(this))
      }

      return webapps
    },
    isSavable () {
      var deletedCnt = 0
      _.forEach(this.webapp.list, (item) => {
        if (item.state === 'deleted') {
          deletedCnt++
        }
      })

      return deletedCnt > 0
    }
  },
  watch: {
    inEdit (newVal, oldVal) {
      _.forEach(this.webapps, function(item) {
        if (!newVal) {
          this.setWebAppState(item._id, 'link')
        } else if (!item.isBuildIn) {
          this.setWebAppState(item._id, 'delete')
        }
      }.bind(this))       
    }
  },
  methods: {
    onIconError (event) {
      let img = event.target
      img.src = getUrlPrefix() + "/static/img/icon.png"
      img.onerror = null
    },
    onSaveChanges () {
      var filterWebApps = _.filter(this.webapps, (item) => {
        return item.state === 'deleted'
      })

      var webapps = _.map(filterWebApps, 'pluginId')

      msgbox.alert({
        title: this.$t('alert.areYouSure'),
        text: this.$t('alert.notBeRecovered') + this.$t('common.and') + this.$t('alert.needRestartService'),
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        cancelButtonText: this.$t('common.cancel'),
        confirmButtonText: this.$t('common.confirm'),
        closeOnConfirm: false,
        showLoaderOnConfirm: true    
      }, 
      function() {
        webAppApi.sendCmd('del', webapps).then(function(res) {
          if (res && res.data && res.data.code === 0) {
            commonApi.sendCmd('restartService') 
            setTimeout(function() {
              msgbox.close()
              location.reload(true)
            }, settings.restartWaitTime)                  
          } else {
            toast.code(this, res.data)
          }
        }.bind(this))
      }.bind(this))   
    },
    onClick (webapp) {
      if (webapp.state === 'link') {
        window.open(webapp.link)
      } else if (webapp.state === 'delete') {
        this.setWebAppState(webapp._id, 'deleted')
      } else if (webapp.state === 'deleted') {
        this.setWebAppState(webapp._id, 'delete')
      }
    },
    getWebAppOpText (state) {
      if (state === 'link') {
        return this.$t('webapp.link')
      } else if (state === 'delete') {
        return this.$t('common.delete')
      } else if (state === 'deleted') {
        return this.$t('common.recovery')
      }      
    }
  }
}
</script>

<style scoped>
.box {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.description-block {
  display: block;
  margin: 10px 0;
  text-align: center;
}
.description-block.margin-bottom {
  margin-bottom: 25px;
}
.description-block > .description-header {
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 16px;
}
.description-block > .description-text {
  text-transform: uppercase;
}

.box-widget {
  border: none;
  position: relative;
}
.widget-user .widget-user-header {
  padding: 20px;
  height: 120px;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}
.widget-user .widget-user-username {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 25px;
  font-weight: 300;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.widget-user .widget-user-desc {
  margin-top: 0;
}
.widget-user .widget-user-image {
  position: absolute;
  top: 65px;
  left: 50%;
  margin-left: -45px;
}
.widget-user .widget-user-image > img {
  width: 90px;
  height: auto;
  border: 3px solid #fff;
}
.widget-user .box-footer {
  padding-top: 30px;
}

.bg-deleted {
  background-color: darkgray;
}
</style>